<template>
  <div class="shopImage-wrap  light_border_shadow" @click="goToDetail(shopInfo)">
    <van-image v-if="shopInfo.avatar" :src="shopInfo.avatar" round ></van-image>
    <Blockies v-else class="border_radius" :seed="shopInfo.account" :size='20' :scale='2' spotcolor="#000" />
    <div class="content">
      <div class="name">{{ shopInfo.nickname }}</div>
      <div class="rateAndSales">
        {{ splitAddress(shopInfo.owner ) }}
      </div>
      <div class="rateAndSales">
        {{ shopInfo.describe }}
      </div>
      <div class="btn_line" v-if="isCollect">
          <van-button :loading="loading" @click.stop="cancelShop(shopInfo)" type="primary">{{ t('cancelCollect') }} </van-button>
        </div>
        <div class="btn_line" v-else-if="onServe">
          <van-button :loading="loading" @click.stop="updateShopShelfStatus(shopInfo)" type="primary">{{ t('listing') }} </van-button>
        </div>
      <div class="btn_line" v-else>
        <van-button :loading="loading" @click.stop="passShop(shopInfo)" type="primary">{{ t('pass') }} </van-button>
        <van-button :loading="loading2" @click.stop="refuseShop(shopInfo)" type="primary">{{ t('refuse') }}</van-button>
      </div>
      
    </div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import Blockies from '@/components/blockVue.vue'
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useStore();
import { splitAddress } from "@/utils/index.js";
import { showToast } from "vant";
import "vant/es/toast/style";
import { ethers } from "ethers";
import { useRouter } from "vue-router";
const router = useRouter();
const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner();
const loading = ref(false)
const loading2 = ref(false)
const emit = defineEmits(["refresh","cancelCollect"]);
const passShop = async (item) => {
  loading.value = true
  try {
    let hex = await ContractWithSinger.verifyShop(item.shopId, 2)
    await hex.wait()
    showToast(t('auditSuccessful'))
    loading.value = false
    let obj = JSON.parse(JSON.stringify(item))
    obj.status = '2'
    // await updateShopDB(obj)
    paySuccess()
  } catch (err) {
    loading.value = false
    showToast(t('auditFail'))
  }
}
const cancelShop = (item)=>{
  item.isCollect = false
    let index = store.state.collectShop.findIndex(el => { return el.account == item.account })
    let arr = JSON.parse(JSON.stringify(store.state.collectShop)) 
    if (index > -1) {
        arr.splice(index, 1)
   }
    store.commit("changeCollectShop",arr)
  emit('refresh')
}
const updateShopShelfStatus = async (item) => {
  loading.value = true
  try {
    let hex = await ContractWithSinger.updateShopShelfStatus(item.shopId, 1)
    await hex.wait()
    showToast(t('onLineSuccessful'))
    let obj = JSON.parse(JSON.stringify(item))
    obj.shelfStatus = '1'
    // await updateShopDB(obj)
    paySuccess()
    loading.value = false
  } catch (error) {
    showToast(t('onLineFail'))
    loading.value = false
  }
}
const goToDetail = (item) => {
  if(props.isCollect){
    router.push({
    name: 'userOrder',
    query: {
      owner: item ? item.owner : '',
    }
    });
  }else{
    router.push({
    name: 'applyShop',
    query: {
      shopId: item ? item.shopId : '',
      isDetail: true,
      isAudit: true,
    }
  });
  }

}
const refuseShop = async (item) => {
  loading2.value = true
  try {
    let hex = await ContractWithSinger.verifyShop(item.shopId, 3)
    await hex.wait()
    showToast(t('auditSuccessful'))
    let obj = { ...item }
    obj.status = '3'
    // await updateShopDB(obj)
    paySuccess()
  } catch (err) {
    loading2.value = false
    showToast(t('auditFail'))
  }
}
const props = defineProps({
  isCollect:{
    type:Boolean,
    default:false
  },
  onServe:{
    type:Boolean,
    default:false
  },
  shopInfo: {
    type: Object,
    default(payInfo) {
      return { Name: "hello", usdtSum: 0, symbol: "CNY", createTime: "" };
    },
  },
});
const paySuccess = () => {
  emit("refresh");
};
</script>
<style lang="scss" scoped>
  .shop_img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4653c8;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    .default_img {
      height: 30px;
      width: 30px;
      font-size: 30px;
      display: inline-block;
      background: #010e39;
      border-radius: 8px;
      padding: 6px;
    }
  }
.shopImage-wrap {
  border: 1px solid #6e778a;
  transform: translateZ(0); /* 启用硬件加速 */
  margin-bottom: 10px;
  display: flex;
  padding: 0.4rem;
  box-sizing: border-box;
  border-radius: 0.3rem;

  .van-image {
    width: 40px;
    height: 40px;
    border-radius: 0.25rem;
    overflow: hidden;
  }

  .content {
    flex: 1;
    position: relative;
    margin-left: 0.32rem;

    .btn_line {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;

      .van-button {
        margin-left: 6px;
        height: 18px;
        font-weight: 500;
        width: 70px;
        border-radius: 0.53333rem;
      }

      .van-button--primary {
        border: none;
        background: linear-gradient(140deg, #0b84fe, #0b84fe);
        font-size: 0.3rem;
        font-weight: 400;
        color: #fff;
      }
    }

    .name {
      font-size: 0.42667rem;
      font-weight: 500;
      line-height: 0.42667rem;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    .rateAndSales {
      display: flex;
      margin-top: 0.21333rem;
      align-items: center;
      color: #888;
    }

    .address {
      margin-top: 8px;
      color: #c7c7cd;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;

      .image {
        float: left;
        display: inline-block;
        margin-right: 0.13333rem;
        width: 0.3rem;
        height: 0.26rem;
      }
    }
  }
}</style>
  